/*
 * @Author: LiuYan
 * @Date: 2022-12-16 17:05:44
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-13 11:36:45
 * @Description:
 */
export default class DiaLog {
  constructor({
    el,
    width,
    title,
    cancel,
    confirm,
    closed,
    isShowFooter = true,
    cancelText = "取消",
    confirmText = "确定",
    zIndex = 100,
  }) {
    this._el = document.createElement("div");
    this._width = width;
    this._title = title;
    this._cancel = cancel;
    this._confirm = confirm;
    this._closed = closed;
    this._isShowFooter = isShowFooter;
    this._cancelText = cancelText;
    this._confirmText = confirmText;
    this._zIndex = zIndex;
    this.el = null;
    this.mask = null;
    this.doc = null;
    this._el.appendChild(document.querySelector(el));
    this.recurveParent(window);
    this.load();
    this.init();
  }
  load() {
    window.onbeforeunload = () => {
      const diaLogList = this.doc.querySelectorAll(".dialog");
      diaLogList.forEach((item) => {
        item.remove();
      });
      const mask = this.doc.querySelectorAll(".dialog_mask");
      mask.forEach((item) => {
        item.remove();
      });
      const messageList = this.doc.querySelectorAll(
        ".yik-message-center-center"
      );
      if (messageList && messageList.length > 0) {
        messageList.forEach((item) => {
          item.remove();
        });
      }
    };
  }
  clear() {
    const diaLogList = this.doc.querySelectorAll(".dialog");
    diaLogList.forEach((item) => {
      item.remove();
    });
    const mask = this.doc.querySelectorAll(".dialog_mask");
    mask.forEach((item) => {
      item.remove();
    });
    const messageList = this.doc.querySelectorAll(".yik-message-center-center");
    if (messageList && messageList.length > 0) {
      messageList.forEach((item) => {
        item.remove();
      });
    }
  }
  init() {
    this.el = document.createElement("div");
    this.el.style["z-index"] = this._zIndex + 2;
    this.el.style.display = "none";
    this.el.className = "dialog";
    this.el.style.width = this._width;
    const header = document.createElement("div");
    const footer = document.createElement("div");
    if (this._isShowFooter) {
      footer.className = "footer";
      footer.innerHTML = `<button class="button_primary_plain">${this._cancelText}</button>&ensp;&ensp;<button class="button_primary">${this._confirmText}</button>`;
      if (!this._cancelText) footer.childNodes[0].style.display = "none";
      if (!this._confirmText)
        footer.childNodes[footer.childNodes.length - 1].style.display = "none";
      footer.childNodes[0].addEventListener("click", (e) => {
        if (this._cancel) this._cancel(this.doc);
      });
      footer.childNodes[footer.childNodes.length - 1].addEventListener(
        "click",
        (e) => {
          if (this._confirm) this._confirm(this.doc);
        }
      );
    }
    header.className = "header";
    header.innerHTML = `<div><span class="icon"></span><span class="title">${this._title}</span></div><span class="close">×</span>`;
    header.childNodes[header.childNodes.length - 1].addEventListener(
      "click",
      (e) => {
        this.hide();
        if (this._closed) this._closed(this.doc);
      }
    );

    this.el.appendChild(header);
    this.el.appendChild(this._el);
    if (this._isShowFooter) this.el.appendChild(footer);
    this.doc.body.appendChild(this.el);
    this.mask = document.createElement("div");
    this.mask.className = "dialog_mask";
    this.mask.style.display = "none";
    this.mask.style["z-index"] = this._zIndex + 1;
    this.mask.addEventListener("click", (e) => {
      this.hide();
      if (this._closed) this._closed(this.doc);
    });
    this.doc.body.appendChild(this.mask);
  }
  show() {
    if (this.doc) {
      this.doc.body.appendChild(this.el);
      this.doc.body.appendChild(this.mask);
    }
    this._el.style.display = "block";
    this.el.style.animation = "diaLog 0.5s";
    this.mask.style.display = "block";
    this.el.style.display = "block";
  }
  hide() {
    this.el.style.display = "none";
    // this.el.remove();
    this.mask.style.display = "none";
    // this.mask.remove();
  }
  recurveParent(next) {
    if (!next.document.getElementById("root")) {
      this.recurveParent(next.parent);
    } else {
      this.doc = next.document;
    }
  }
}
